<template>
  <div class="table">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item
          ><i class="el-icon-lx-cascades"></i> 用户列表</el-breadcrumb-item
        >
      </el-breadcrumb>
    </div>
    <div class="container">
      <!-- <mark :text="4567890987656789" /> -->
      <v-annotator
        inertia
        @select="openDialog"
        :minSize="[50, 50]"
        :grid="[5, 5]"
      >
        <!-- <img draggable="false" src="https://img2.baidu.com/it/u=617579813,2960860841&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800" /> -->
        <img
          draggable="false"
          src="https://img1.baidu.com/it/u=3708514927,3147172594&fm=253&fmt=auto&app=138&f=JPEG?w=749&h=500"
        />

        <rect
          slot="annotation"
          stroke="green"
          x="300"
          y="150"
          width="170"
          height="100"
        />
        <polygon
          slot="annotation"
          stroke="purple"
          points="200,10 250,190 160,210"
        />

        <rect slot="default" stroke="red" />
      </v-annotator>
      <div class="handle-box">
        <el-input
          autosize
          type="textarea"
          :rows="2"
          placeholder="请输入内容"
          v-model="textarea1"
        >
        </el-input
        ><el-input
          autosize
          type="textarea"
          :rows="2"
          placeholder="请输入内容"
          v-model="textarea2"
        >
        </el-input>
        <!-- <el-button
          type="primary"
          icon="delete"
          class="handle-del mr10"
          @click="delAll"
          >批量删除</el-button
        >
        <el-select
          v-model="select_cate"
          placeholder="筛选省份"
          class="handle-select mr10"
        >
          <el-option key="1" label="广东省" value="广东省"></el-option>
          <el-option key="2" label="湖南省" value="湖南省"></el-option>
        </el-select> -->

        <el-input
          v-model="userName"
          placeholder="筛选名称"
          class="handle-input mr10"
        ></el-input>
        <br />
        <img @click="code" :src="img" alt="" />
        <br />
        <el-button type="primary" icon="search" @click="search">搜索</el-button>
        <el-button type="primary" icon="search" @click="handClick('add')"
          >添加</el-button
        >
        <el-button type="primary" icon="search" @click="getPublicKey"
          >登录</el-button
        >
        <el-button type="primary" icon="search" @click="handle(true)"
          >打开</el-button
        >
      </div>
      <el-table
        :data="tableData"
        border
        class="table"
        ref="multipleTable"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
          align="center"
        ></el-table-column>

        <el-table-column prop="subRegistrationNo" label="登记编号">
        </el-table-column>
        <el-table-column prop="parent.type" label="业务类型"> </el-table-column>
        <el-table-column prop="parent.registrationTypeName" label="登记类型">
        </el-table-column>
        <el-table-column prop="parent.annexHitStatus" label="附件解析状态">
          <template slot-scope="scope">
            <div>
              {{ zhu(scope.row.parent.annexHitStatus) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="parent.historyRemark" label="历史备注">
        </el-table-column>
        <el-table-column prop="parent.pawneeNameListStr" label="受让方企业名称">
        </el-table-column>
        <el-table-column prop="parent.registrationDate" label="登记时间">
        </el-table-column>
        <el-table-column
          prop="parent.registrationExpirationDate"
          label="到期日"
        >
        </el-table-column>
        <el-table-column prop="parent.formWriter" label="填表人">
        </el-table-column>

        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="scope">
            <!-- <el-button
              type="text"
              icon="el-icon-edit"
              @click="handClick('edit', scope.row)"
              >编辑</el-button
            > -->
            <el-button type="text" @click="detail(scope.row)">详情 </el-button>
            <el-button type="text" @click="wenjian(scope.row)">文件 </el-button>
            <el-button type="text" @click="handle(true)">打开 </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          :page-size="pageSize"
          @current-change="handleCurrentChange"
          layout="prev, pager, next"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <Info
      :drawer="drawer"
      @handle="handle"
      :annexDetailInfo="annexDetailInfo"
      :propertyHitInfo="propertyHitInfo"
    />

    <!-- 添加/编辑弹出框 -->
    <el-dialog title="添加" :visible.sync="editVisible" width="500px">
      <el-form ref="formEdit" :model="formEdit" label-width="90px">
        <el-form-item label="姓名：">
          <el-input
            v-model="formEdit.userName"
            @input="formEdit.userName = formEdit.userName.replace(/\s*/g, '')"
            @blur="blur"
          ></el-input>
        </el-form-item>
        <el-form-item label="登录账号：">
          <el-input disabled v-model="formEdit.account"></el-input>
        </el-form-item>
        <el-form-item label="性别：">
          <el-radio v-model="formEdit.sex" label="1">男</el-radio>
          <el-radio v-model="formEdit.sex" label="2">女</el-radio>
        </el-form-item>
        <el-form-item label="edm账号：">
          <el-input v-model="formEdit.edmAccount"></el-input>
        </el-form-item>
        <el-form-item label="edm密码：">
          <el-input v-model="formEdit.edmPassword"></el-input>
        </el-form-item>
        <el-form-item label="邮箱：">
          <el-input v-model="formEdit.email"></el-input>
        </el-form-item>
        <el-form-item label="打卡状态：">
          <el-radio v-model="formEdit.isActive" label="0">开启</el-radio>
          <el-radio v-model="formEdit.isActive" label="1">关闭</el-radio>
        </el-form-item>
        <el-form-item label="打卡地点：">
          <template v-if="type == 'add'"> 默认 </template>
          <template v-else>
            <dkInfo
              @changePlace="changePlace"
              :isShow="editVisible"
              :params="formEdit"
            />
          </template>
        </el-form-item>
        <el-form-item label="备注：">
          <el-input v-model="formEdit.remark"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveEdit">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 删除提示框 -->
    <el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
      <div class="del-dialog-cnt">
        可选物理删除或逻辑删除，物理删除不可恢复，请选择？
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="delVisible = false">取 消</el-button>
        <el-button type="primary" @click="deleteRow(false)">逻辑删除</el-button>
        <el-button type="primary" @click="deleteRow(true)">物理删除</el-button>
      </span>
    </el-dialog>
    <!-- 详情展示框 -->
    <el-dialog
      title="打卡详情"
      :visible.sync="infoVisible"
      width="900px"
      center
    >
      <!-- <dkInfo :isShow="infoVisible" :params="formEdit" /> -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="infoVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import user from '@/api/user';
import { pinyin } from 'pinyin-pro';
import dkInfo from './dkInfo.vue';
import Info from './info.vue';
import { encryptedData, decrypt } from './util';
// import mark from './Marking/index.vue';

export default {
  name: 'basetable',
  components: {
    dkInfo,
    Info,
    // mark
  },
  data() {
    return {
      drawer: false,
      textarea1: '',
      textarea2: '',
      //登记附件信息
      annexDetailInfo: {},
      //财产描述命中信息
      propertyHitInfo: {},
      img: '',
      userId: '',
      url: './vuetable.json',
      total: 0,
      userName: '',
      tableData: [],
      cur_page: 1,
      pageSize: 10,
      multipleSelection: [],
      select_cate: '',
      select_word: '',
      del_list: [],
      is_search: false,
      editVisible: false,
      delVisible: false,
      infoVisible: false,
      type: 'add',
      formEdit: {
        userId: '',
        userName: '',
        sex: '1',
        account: '',
        password: '',
        edmAccount: '',
        edmPassword: '',
        email: '',
        isDelete: '0',
        isActive: '0',
        token: '',
        place: '',
        remark: '这个人很懒，什么都没有留下~',
      },
      idx: -1,
    };
  },
  created() {
    this.getData();
    this.code();
    this.textarea1 = sessionStorage.getItem('textarea1');
    this.textarea2 = sessionStorage.getItem('textarea2');
  },
  // computed: {
  //   data() {
  //     return this.tableData.filter((d) => {
  //       let is_del = false;
  //       for (let i = 0; i < this.del_list.length; i++) {
  //         if (d.name === this.del_list[i].name) {
  //           is_del = true;
  //           break;
  //         }
  //       }
  //       if (!is_del) {
  //         if (
  //           d.address.indexOf(this.select_cate) > -1 &&
  //           (d.name.indexOf(this.select_word) > -1 ||
  //             d.address.indexOf(this.select_word) > -1)
  //         ) {
  //           return d;
  //         }
  //       }
  //     });
  //   },
  // },
  methods: {
    openDialog(val) {
      console.log(val);
    },
    handle(val) {
      console.log(val, '000000');
      this.drawer = val;
      //登记附件信息
      this.annexDetailInfo = JSON.parse(this.textarea1);
      //财产描述命中信息
      this.propertyHitInfo = JSON.parse(this.textarea2);
    },
    detail(val) {
      console.log(val);
      let query = JSON.parse(sessionStorage.getItem('hitDetail'));
      let obj = {
        taskNum: query.taskId,
        registrationNo: val.subRegistrationNo,
        userAccount: 'diane_lalala',
      };
      this.hitDetail(obj);
    },
    hitDetail(obj) {
      user
        .hitDetail(obj)
        .then((res) => {
          console.log(res, 'oooooooooo');
          console.log(res.data, 'oooooooooo');

          this.textarea1 = JSON.stringify(res.data.annexDetailInfo, '', '\t');
          this.textarea2 = JSON.stringify(res.data.propertyHitInfo, '', '\t');
          this.drawer = true;
          sessionStorage.setItem('textarea1', this.textarea1);
          sessionStorage.setItem('textarea2', this.textarea2);
          //登记附件信息
          this.annexDetailInfo = res.data.annexDetailInfo;
          //财产描述命中信息
          this.propertyHitInfo = res.data.propertyHitInfo;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    wenjian(val) {
      window.open(
        'https://beefeather.llschain.com/file-handle-web/file/image?filename=' +
          val.parent.regProofFileUrl
      );
    },
    zhu(key) {
      switch (key) {
        case 0:
          return '解析中';
        case 1:
          return '解析成功';
        case 2:
          return '解析失败';
        case 3:
          return '未解析';
        case 4:
          return '无附件';
        default:
          return '---';
      }
    },
    getPublicKey() {
      console.log(encryptedData('Aa123456!'));
      user
        .getPublicKey()
        .then((res) => {
          console.log(res.data, 'oooooooooo');
          let obj = {
            password: encryptedData(res.data, 'Aa123456!'),
            picCheckCode: this.userName,
            userName: 'youchubank',
          };
          this.login(obj);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    login(obj) {
      user
        .login(obj)
        .then((res) => {
          console.log(res, 'oooooooooo');
          console.log(res.data, 'oooooooooo');
          if (res.data) {
            this.$message({
              message: '登录成功!',
              type: 'success',
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    code() {
      let index = new Date().getTime();
      console.log(index);
      user
        .code(index)
        .then((res) => {
          console.log(res.data);
          this.img = window.URL.createObjectURL(res.data);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    blur() {
      console.log(this.formEdit.account);
      this.formEdit.account = pinyin(this.formEdit.userName, {
        toneType: 'none',
      }).replace(/\s*/g, '');
    },
    // 分页导航
    handleCurrentChange(val) {
      this.cur_page = val;
      this.getData();
    },
    // 获取 easy-mock 的模拟数据
    getData() {
      // 开发环境使用 easy-mock 数据，正式环境使用 json 文件
      if (process.env.NODE_ENV === 'development') {
        this.url = '/api/users/query';
      }
      this.search();
    },
    search() {
      this.is_search = true;
      let query = JSON.parse(sessionStorage.getItem('hitDetail'));
      console.log(query);
      let info = {
        current: 1,
        size: 10,
        total: 1,
        queryCondition: {
          keyWords: [],
          bizList: [],
          pawneeNameListStr: '',
          formWriter: '',
          attachHitStatus: '',
          expirationDate: '',
          startTime: null,
          endTime: null,
          time: null,
          hit: 1,
          taskNum: query.taskId,
        },
        userAccount: 'diane_lalala',
      };
      user
        .queryHitList(info)
        .then((res) => {
          console.log(res, 'oooooooooo');
          console.log(res.data, 'oooooooooo');
          if (res.data) {
            console.log(res.data);
            this.tableData = res.data.records;
            this.total = Number(res.data.total);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    formatter(row, column) {
      return row.address;
    },
    filterTag(value, row) {
      return row.tag === value;
    },
    handleLook(row) {
      if (row.token) {
        this.formEdit = JSON.parse(JSON.stringify(row));
        this.infoVisible = true;
      } else {
        this.$message({
          message: '没有token!',
          type: 'warning',
        });
      }
    },
    handleDelete(row) {
      this.userId = row.userId;
      this.delVisible = true;
    },
    delAll() {
      const length = this.multipleSelection.length;
      let str = '';
      this.del_list = this.del_list.concat(this.multipleSelection);
      for (let i = 0; i < length; i++) {
        str += this.multipleSelection[i].name + ' ';
      }
      this.$message.error('删除了' + str);
      this.multipleSelection = [];
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    //添加用户
    handClick(type, row) {
      this.type = type;
      if (type == 'add') {
        this.formEdit = {
          userId: '',
          userName: '',
          sex: '1',
          account: '',
          password: '',
          edmAccount: '',
          edmPassword: '',
          email: '',
          isDelete: '0',
          isActive: '0',
          token: '',
          place: '0',
          remark: '这个人很懒，什么都没有留下~',
        };
      } else {
        this.formEdit = JSON.parse(JSON.stringify(row));
      }
      this.editVisible = true;
    },
    // 保存编辑
    saveEdit() {
      if (this.type == 'add') {
        this.add();
      } else {
        this.edit();
      }
    },
    //修改打卡地点
    changePlace(val) {
      this.formEdit.place = val;
    },

    //修改接口
    edit() {
      user
        .edit(this.formEdit)
        .then((res) => {
          console.log(res.data);
          this.editVisible = false;
          if (res.data) {
            this.$message({
              message: '修改成功!',
              type: 'success',
            });
            this.getData();
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    //添加接口
    add() {
      user
        .add(this.formEdit)
        .then((res) => {
          console.log(res.data);
          this.editVisible = false;
          if (res.data) {
            this.$message({
              message: '添加成功!',
              type: 'success',
            });
            this.getData();
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 确定删除
    deleteRow(isSure) {
      user
        .remove({ isSure, userId: this.userId })
        .then((res) => {
          console.log(res.data);
          this.delVisible = false;
          if (res.data) {
            this.$message({
              message: '删除成功!',
              type: 'success',
            });
            this.getData();
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style scoped>
/* @import '~vue-annotator/style.css'; */

/* Your beloved style */
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}

.del-dialog-cnt {
  font-size: 16px;
  text-align: center;
}

.table {
  width: 100%;
  font-size: 14px;
}

.red {
  color: #ff0000;
}

.mr10 {
  margin-right: 10px;
}

.text {
  background: lightgray;
  margin: 0 5px;
}
</style>
